<template>
  <!--设置昵称密码-->
  <el-form :model="form" :rules="rules" ref="form">
      <label class="lbl">设置密码</label>
      <el-form-item class="pwd relative" prop="password">
          <el-input type="password" class="full-width" v-model="form.password" placeholder="请输入密码">
              <template slot="prepend"><i class="iconfont">&#xe633;</i></template>
          </el-input>
          <p class="regex">长度为6~16个字符，可由英文（区分大小写）、数字和下划线组成。</p>
      </el-form-item>

      <el-form-item prop="confirmPassword">
          <el-input type="password" class="full-width" v-model="form.confirmPassword" placeholder="请再次输入密码">
              <template slot="prepend"><i class="iconfont">&#xe633;</i></template>
          </el-input>
      </el-form-item>
      <label class="lbl relative">
          设置昵称(选填)
          <i class="icon icon-warn ab"
              v-on:mouseenter="hover=true"
              v-on:mouseleave="hover=false"></i> 
          <div v-show="hover" class="popover bottom">
              <div class="arrow"></div>
              与球苗业务或品牌冲突等的昵称，本网站将有权收回。
          </div>
      </label>
      <el-form-item prop="nickname" :class="['relative']">
          <el-input class="full-width" v-model="form.nickname" placeholder="请输入昵称" @blur="checkNickname()">
          </el-input>
          <p class="regex">昵称支持中文、字母、数字、“_”、“、”、“.”的组合，4-20个字符</p>
      </el-form-item>
      <el-button type="primary" class="full-width sure-btn" :loading="loading" @click="submitForm('form')">
          确定
      </el-button>
  </el-form>
</template>

<script>
  import indexApi from 'api'
  import validator from 'utils/validator'
  export default {
    components: {},
    computed: {},
    data () {
      return {
        validator,
        loading: false,
        check_nickname: false,
        hover: false,
        rules: {
          password: [
            {required: true, message: '请输入密码'},
            {min: 6, max: 16, message: '长度为 6 到 16 个字符', trigger: 'blur'},
            validator.rule.isPassword
          ],
          confirmPassword: [
            {required: true, message: '请再次输入密码'},
            {min: 6, max: 16, message: '长度为 6 到 16 个字符', trigger: 'blur'},
            {
              validator: (rule, value, callback) => {
                if (this.form.password !== this.form.confirmPassword) {
                  callback(new Error('两次输入的密码不一致'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ],
          nickname: [
            {required: true, message: '请输入昵称'},
            validator.rule.nickName,
            {
              validator: (rule, value, callback) => {
                if (this.check_nickname) {
                  callback(new Error('昵称已存在'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ]
        },
        form: {
          password: '',
          confirmPassword: '',
          nickname: ''
        }
      }
    },
    methods: {
      submitForm (formName) {
        let userName = this.$route.query.id
        this.$refs[formName].validate((valid) => {
          if (valid) {
            indexApi.setPasswordAndNickname(
              {
                account: userName,
                password: this.form.password,
                nickname: this.form.nickname
              },
              {
                context: this
              }
            ).then((res) => {
              // 是否邮箱，是跳转绑定手机，否注册结果页
              if (validator.rule.email.pattern.test(userName)) {
                this.$router.push({path: '/signup/bind', query: {userName: userName, success: true}})
              } else {
                this.$router.push({path: '/signup/result', query: {userName: userName, success: true}})
              }
            }).catch((res) => {
              this.$router.push({path: '/signup/result', query: {userName: userName, success: false}})
            })
          } else {
            return false
          }
        })
      },
      // 验证昵称
      checkNickname () {
        if (validator.pattern.nickname.test(this.form.nickname)) {
          indexApi.checkNickname({nickname: this.form.nickname}).then((res) => {
            this.check_nickname = res.data
          }).catch(() => {
            return false
          })
        }
      }
    }
  }
</script>

<style lang="scss">
</style>
